<template>
  <el-dialog
    v-model="visible"
    :title="`部门详情 - ${departmentDetail?.department_name || '加载中...'}`"
    width="1200px"
    :close-on-click-modal="false"
    top="5vh"
  >
    <div v-loading="loading" class="detail-content" v-if="departmentDetail">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">📌 基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="部门代码">
            {{ departmentDetail?.department_code || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="部门名称">
            {{ departmentDetail?.department_name || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag
              :type="getStatusType(departmentDetail?.status)"
              size="small"
            >
              {{ getStatusText(departmentDetail?.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="配置状态">
            <el-tag
              :type="departmentDetail?.is_configured ? 'success' : 'warning'"
              size="small"
            >
              {{ departmentDetail?.is_configured ? "✅ 已配置" : "⚠️ 未配置" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">
            {{ departmentDetail?.description || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 责任人信息 -->
      <div class="detail-section">
        <h3 class="section-heading">👤 责任人信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="主责任人">
            {{ departmentDetail?.responsible_person || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="责任人邮箱">
            {{ departmentDetail?.responsible_email || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="责任人电话">
            {{ departmentDetail?.responsible_phone || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="责任人职务">
            {{ departmentDetail?.responsible_title || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="备用责任人">
            {{ departmentDetail?.backup_person || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="备用责任人邮箱">
            {{ departmentDetail?.backup_email || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="备用责任人电话">
            {{ departmentDetail?.backup_phone || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 统计数据 -->
      <div class="detail-section" v-if="departmentDetail?.statistics">
        <h3 class="section-heading">📊 统计数据</h3>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="总资产数">
            <span class="stat-value primary">
              {{ departmentDetail.statistics.total_assets || 0 }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="AI推断分配">
            <span class="stat-value info">
              {{ departmentDetail.statistics.ai_inference_count || 0 }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="手工确认分配">
            <span class="stat-value success">
              {{ departmentDetail.statistics.manual_confirm_count || 0 }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 关键词列表 -->
      <div class="detail-section" v-if="departmentDetail?.keywords">
        <h3 class="section-heading">🔑 关键词列表</h3>
        <el-table
          :data="departmentDetail.keywords"
          border
          size="small"
          v-if="departmentDetail.keywords.length > 0"
        >
          <el-table-column prop="keyword" label="关键词" width="150" />
          <el-table-column prop="weight" label="权重" width="100">
            <template #default="{ row }">
              {{ row.weight ? row.weight.toFixed(2) : "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="description" label="描述" />
        </el-table>
        <div v-else class="no-data">暂无关键词</div>
      </div>

      <!-- 管理信息 -->
      <div class="detail-section">
        <h3 class="section-heading">📝 管理信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建者">
            {{ departmentDetail?.created_by || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ departmentDetail?.created_time || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新者">
            {{ departmentDetail?.updated_by || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ departmentDetail?.updated_time || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  departmentDetail: {
    type: Object,
    default: () => null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

// 获取状态类型
const getStatusType = (
  status?: string
): "success" | "warning" | "danger" | "info" => {
  const typeMap: Record<string, "success" | "warning" | "danger" | "info"> = {
    active: "success",
    inactive: "warning",
    archived: "info",
  };
  return typeMap[status || ""] || "info";
};

// 获取状态文本
const getStatusText = (status?: string): string => {
  const textMap: Record<string, string> = {
    active: "活跃",
    inactive: "非活跃",
    archived: "已归档",
  };
  return textMap[status || ""] || status || "未知";
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-section {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-value {
  font-weight: 600;
  font-size: 18px;

  &.primary {
    color: #409eff;
  }

  &.info {
    color: #909399;
  }

  &.success {
    color: #67c23a;
  }

  &.warning {
    color: #e6a23c;
  }
}

.no-data {
  color: #909399;
  font-size: 14px;
  padding: 20px;
  text-align: center;
}
</style>
